<template>
	<view class="content">
		<u-navbar :title="info.title" :autoBack="showBack" :leftIcon="showBack?'arrow-left':''">
		</u-navbar>
		<view style="position: absolute;z-index: -1;top: 0;">
			<u-count-down :time="this.minutes * 1000" @change="onChange"></u-count-down>
		</view>
		<view class="container">
			<view class="detail">
				<image class="s1" :src="info.share_image_url" mode="aspectFill"></image>

				<view class="temp" style="position: relative;">
					<view class="audio-btn" v-if="info.musicfile != ''">
						<image class="song-play-image song-play-animation"
							:class="{'song-play-animation-paused': !isPlay}" v-if="isPlay" @click="clickPlay()"
							src="@/static/playing.png"></image>
						<image class="song-play-image song-play-animation"
							:class="{'song-play-animation-paused': !isPlay}" v-else @click="clickPlay()"
							src="@/static/playpuase.png"></image>
					</view>
					<view class="temp0" v-if="info.templateid===0">
						<image class="img" :src="conf.preview_url+info.template_custom_image" mode="aspectFill"></image>

						<view class="clock">
							<view class="aaaa">
								<view class="clock-item" style="position: relative;">
									<view v-if="minutes !=0" class="dddd">
										<view style="padding-right: 20rpx;">距离活动结束时间</view>
										<!-- <view class="cccc">{{timeData.days}}</view>
										天 -->
										<view class="cccc">
											{{timeData.days==0? timeData.hours:timeData.days*24+timeData.hours}}
										</view> 时
										<view class="cccc">
											{{ timeData.minutes }}
										</view> 分<view class="cccc">{{ timeData.seconds }}</view> 秒
									</view>
									<view v-else style="padding-left: 24rpx;margin:0 auto;">
										活动已结束
									</view>
									<image src="@/static/clock.png" class="clock-img"></image>
								</view>
							</view>
						</view>

					</view>
					<view class="temp1" v-if="info.templateid==2">
						<image class="img" src="../../static/temp1.png" mode=""></image>
						<text class="title-name">{{info.title}}</text>
						<view class="clock">
							<view v-if="minutes!=0">
								距离活动结束时间：{{timeData.days}}天{{ timeData.hours}}时{{ timeData.minutes }}分{{ timeData.seconds }}秒
							</view>
							<view style="font-size: 32rpx;" v-else>
								活动已结束
							</view>
						</view>
					</view>
					<view class="temp2" v-if="info.templateid==1">
						<image class="img" src="../../static/temp2.png" mode=""></image>
						<text class="title-name">{{info.title}}</text>
						<view class="clock">
							<template v-if="minutes!=0">
								<view>距离活动结束时间：</view>
								<view>
									{{timeData.days}}天{{ timeData.hours}}时{{ timeData.minutes }}分{{ timeData.seconds }}秒
								</view>
							</template>
							<view style="font-size: 32rpx;" v-else>
								活动已结束
							</view>
						</view>
					</view>
					<view class="temp3" v-if="info.templateid==4">
						<image class="img" src="../../static/temp3.png" mode=""></image>
						<text class="title-name">{{info.title}}</text>
						<view class="clock">
							<view v-if="minutes!=0">
								距离活动结束时间：{{timeData.days}}天{{ timeData.hours}}时{{ timeData.minutes }}分{{ timeData.seconds }}秒
							</view>
							<view style="font-size: 32rpx;" v-else>
								活动已结束
							</view>
						</view>
					</view>
					<view class="temp4" v-if="info.templateid==3">
						<image class="img" src="../../static/temp4.png" mode=""></image>
						<text class="title-name">{{info.title}}</text>
						<view class="clock">
							<view v-if="minutes!=0">
								距离活动结束时间：{{timeData.days}}天{{ timeData.hours}}时{{ timeData.minutes }}分{{ timeData.seconds }}秒
							</view>
							<view style="font-size: 32rpx;" v-else>
								活动已结束
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="title">{{ info.title }}</view>
			<view class="time">{{ info.start_time_text }}</view>
			<view class="address">{{ info.address }}</view>
		
			<view class="content-images">
				<image :src="v.url" v-for="(v, i) in info.content_images_url" :key='i' mode="widthFix"></image>
			</view> -->
				<view v-if="info.templateid===0" style="margin: 20rpx 0;">
					<text class="" style="font-size: 34rpx;font-weight: bold;">{{info.title}}</text>
				</view>
				<view class="list" v-if="info.content_node">
					<view class="item" v-for="item,index in info.content_node" :key="index">
						<view class="left">
							<view class="txt" v-if="item.type=='text'">{{item.value}}</view>

							<!-- <u--image radius="16rpx" :showLoading="true" v-else :src="item.value" width="100%"  
								 ></u--image> -->
							<image :src="item.value" v-else mode="widthFix" style="border-radius: 16rpx;width: 100%;"
								lazy-load></image>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="avatars" v-if="info.in_set == 1 && info.user_list.length > 0">
				<view class="title">谁参与了活动</view>
				<view class="avatar">
					<image :src='v.avatar' v-for='(v, i) in info.user_list' :key="i" mode="aspectFill"></image>
				</view>
			</view> -->

			<view class="but" v-if="es_show">
				<view class="s1" @click="createQrcode()">
					<text>生成分享海报</text>
				</view>

				<view class="s2" @click="goSend()">
					<text>立即购买({{ info.money }}元)</text>
				</view>
			</view>

			<!-- <view class="but-tab" v-if="info.musicfile != ''">
				<image class="song-play-image song-play-animation" :class="{'song-play-animation-paused': !isPlay}"
					@click="clickPlay()" src="@/static/icon/yy.png"></image>
			</view> -->

			<u-popup :show="popup_show" @close="onClose" mode='center' bgColor='transparent'>
				<view class="popup_image">
					<view class="back"></view>
					<image :src='popup_image + "?" + Math.random()' class="share_image"></image>
					<view class="close" @click="onClose">
						<u-icon name="close-circle-fill" color='#fff' size='22'></u-icon>
					</view>
					<view class="text_note" v-if="isWechatBrowser">
						<image src="@/static/hand.png" style="width:32rpx;height: 32rpx;" />
						<text>长按图片进行保存</text>
					</view>
					<view class="button" @click="download" v-else>
						<button>下 载</button>
					</view>
				</view>
			</u-popup>
		</view>


	</view>
</template>


<!-- <script src="@/common/jweixin-1.4.0.js"></script> -->
<script>
	// const {
	// 	Howl,
	// 	Howler
	// } = require('@/common/howler.min.js');
	import conf from "@/common/config.js"
	import utils from "@/common/util.js"



	// #ifdef H5
	var jweixin = require('jweixin-module')
	// #endif
	function compareTime(inputTime) {
		// 获取当前时间的时间戳（毫秒）
		var currentTime = new Date().getTime();

		// 将传入的时间字符串转换为时间戳（毫秒）
		var inputTimestamp = new Date(inputTime).getTime();
		console.log(inputTimestamp > currentTime);
		// 如果传入的时间晚于当前时间，则返回"已结束"
		if (currentTime > inputTimestamp) {
			return "0";
		}

		// 计算时间差（毫秒）
		var difference = inputTimestamp - currentTime;

		// 将时间差转换为秒数
		var differenceInSeconds = Math.floor(difference / 1000);

		return differenceInSeconds;
	}

	export default {
		data() {
			return {
				conf,
				id: 0,
				user_id: 0,
				info: {
					musicfile: ''
				},
				popup_show: false,
				popup_image: '',
				isPlay: false,
				es: 1,
				es_show: true,
				minutes: 0,
				timeData: {

				},
				sound1: null,
				innerAudioContext: null,

				isWechatBrowser: true,
				showBack: true,
			};
		},
		onLoad(options) {
			this.id = options.id
			if (!(sessionStorage.getItem('back') == 1)) {
				this.showBack = false
			}
			this.user_id = options.user_id || this.vuex_user.id; // fix bug, 如果是自己买，就没有推荐人id, 就把自己当推荐人
			this.es = options.es || 1;
			this.isWechatBrowser = utils.isWechatBrowser()

			if (!this.vuex_user.mp_openid) {
				this.$API.getRawUserInfo().then(res => {
					if (1 == res.code) {
						this.$u.vuex('vuex_user.mp_openid', res.data.mp_openid);
					}
				})
			}

		},
		onShow() {

			if (!this.vuex_token) {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				let fullPath = currentPage.__page__.fullPath
				uni.setStorageSync('set_url', fullPath);
				uni.navigateTo({
					url: '/pages/my/login'
				})
				return;
			}
			this.getInfo();

		},

		onUnload() {
			console.log('停止播放onUnload')
			this.isPlay = false;
			this.innerAudioContext.stop()
			sessionStorage.removeItem('back')
		},
		onHide() {
			console.log('停止播放onHide')
			this.isPlay = false;
			// this.sound1.stop();
			this.innerAudioContext.stop()
		},
		methods: {
			onChange(e) {
				this.timeData = e
			},
			download() {
				let imageUrl = this.popup_image;

				var parts = imageUrl.split('/');
				var fileName = parts[parts.length - 1];

				// 创建一个a标签
				const link = document.createElement('a');
				// 设置下载的文件名
				const filename = 'share_image.png';

				// 设置图片的BASE64格式作为下载内容
				link.href = conf.url_config + '/api/order/getShareImage?filename=' + fileName;

				link.download = filename;

				// // // 触发点击事件
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);
				// window.open(this.popup_image)
			},
			getInfo() {
				let that = this
				this.$API.getActivity({
					id: this.id,
					es: this.es
				}).then(res => {
					this.info = res.data;
					// console.log(res.data)
					if (res.data.share_title != '') {
						uni.setNavigationBarTitle({
							title: res.data.title
						})
					} else {
						uni.setNavigationBarTitle({
							title: res.data.title
						})
					}
					this.minutes = Math.abs(compareTime(res.data.end_time * 1000))
					console.log(this.minutes);
					let time = Number(new Date);
					if (res.data.status == 0 || res.data.end_time * 1000 < time) {
						this.es_show = false;
					}

					if (res.data.musicfile != '') {
						// this.sound1 = new Howl({
						// 	src: [res.data.musicfile_url],
						// 	autoplay: true,
						// 	loop: true,
						// 	preload: false,
						// 	html5: true,
						// })
						// this.isPlay = true
						// this.sound1.play()
						// this.sound1.on('load', () => {
						// 	window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {},
						// 		() => {
						// 			this.isPlay = true
						// 			this.sound1.play()
						// 		}, false)
						// })
						this.innerAudioContext = uni.createInnerAudioContext();
						// 初始自动播放音频
						// innerAudioContext.autoplay = true
						// 是否循环播放this.
						this.innerAudioContext.loop = true
						// // 存入音频路径
						this.innerAudioContext.src = res.data.musicfile_url;
						// this.onPlay()
						this.onVoError();
					} else {
						this.isPlay = false;
					}
					if (this.info.content_node) {
						this.info.content_node = JSON.parse(this.info.content_node) || []
					} else {
						this.info.content_node = []
					}


					this.shareTitle = this.info.title
					this.shareDesc = this.info.share_title
					this.share1v1Image = this.info.share_image_url

					// #ifdef H5
					this.share()
					// #endif


				}).catch(err => {
					setTimeout(function() {
						uni.redirectTo({
							url: '/pages/index/index'
						})
					}, 3000);
				})


			},
			// 监控错误
			onVoError() {
				this.innerAudioContext.onError((res) => {
					this.isPlay = false
					console.log(res)
				});
			},
			// 点击播放/暂停按钮
			clickPlay() {
				if (this.isPlay) this.onPause();
				else this.onPlay()
			},
			// 监听播放
			onPlay() {
				// this.sound1.play()
				this.innerAudioContext.play();
				this.innerAudioContext.onPlay((res) => {
					this.isPlay = true;
					console.log('开始播放');
				})
			},
			// 监听暂停
			onPause() {
				this.innerAudioContext.pause();
				this.innerAudioContext.onPause((res) => {
					this.isPlay = false;
				})
				// this.sound1.pause();
			},

			createQrcode() {
				this.$API.createQrcode({
					id: this.id
				}).then(res => {
					this.popup_image = res.data.qrcode;
					this.popup_show = true;
				});
			},
			onClose() {
				this.popup_show = false;
			},
			goSend() {
				let that = this

				if (this.info.money == 0) {
					uni.showLoading({
						title: '处理中'
					})
					this.$API.zeroOrderPay_api({
						really_user_id: this.vuex_user.id,
						user_id: this.user_id
					}, this.info.id).then(res => {
						console.log(res);
						if (res.code == 1) {
							uni.navigateTo({
								url: '/pages/my/address_way?aid=' + res.data.order_id
							})
						} else {
							setTimeout(() => {
								this.$u.toast(res.msg)
							}, 500)
						}

					}).finally(() => {
						uni.hideLoading()
					})
					return
				}

				if (utils.isNormalBrowser()) {
					// 普通浏览器支付
					var obj = {
						pay_way: 'h5',
						type: 'activity', //创建支付的类型
						id: this.id, //活动id
						user_id: this.user_id, //推荐人id
						really_user_id: this.vuex_user.id
					}
					console.log(obj)
					var jsonString = JSON.stringify(obj);
					var urlEncodedData = encodeURIComponent(jsonString);
					console.log(urlEncodedData)

					window.location.href = '/index.php/api/order/createTransaction?info=' + urlEncodedData;
				} else if (utils.isWechatBrowser()) {
					if (!this.vuex_user.mp_openid) {
						uni.showModal({
							title: '提示',
							content: '用户使用微信浏览器支付需绑定超田公众号',
							success: function(res) {
								if (res.confirm) {
									let appid = conf.gzh_appid
									let uri =
										'https://h5.pyhhzapp.com/index.php/index/index/getopenid/user_id/' +
										that.vuex_user.id + '/currentpage/' + btoa(window.location.href)
										.replace('/', 'ctkkk')
									let authURL =
										`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;

									// console.log(authURL)
									window.location.href = authURL;
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						var obj = {
							pay_way: 'jssdk',
							type: 'activity', //创建支付的类型
							id: this.id, //活动id
							user_id: this.user_id || this.vuex_user.id, //推荐人id
							really_user_id: this.vuex_user.id
						}

						var jsonString = JSON.stringify(obj);
						var urlEncodedData = encodeURIComponent(jsonString);

						// 有openid, 开始进行公众号的支付
						let url = window.location.href.split('&')[0]
						this.$API.jssdkConfig({
								url: url,
								api_list: [
									'chooseWXPay'
								].join("-")
							}).then(res => {
								console.log(res);
								let data = res.data
								if (res.code) {
									jweixin.config({
										debug: false,
										appId: data.appId,
										timestamp: data.timestamp,
										nonceStr: data.nonceStr,
										signature: data.signature,
										jsApiList: data.jsApiList,
									});
									jweixin.error(function(res) {
										// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
										console.log('anything wrong');
										console.log(res);
									})
								}
							})
							.then(() => {
								jweixin.ready(() => {
									this.$API.createTransaction({
										info: urlEncodedData
									}).then(res => {
										console.log(res);
										let data = res.data

										if (res.code) {
											jweixin.chooseWXPay({
												timestamp: data.timeStamp,
												nonceStr: data.nonceStr,
												package: data.package,
												signType: data.signType,
												paySign: data.paySign,
												success: (res) => {
													// 支付成功后的回调函数
													console.log(res);

													// 跳转到检查支付结果的中间页
													window.location.href = data.return_url
												}
											});
										}


									})
								})
							})

					}



				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.title-name {
		height: 228rpx;
		text-align: center;
		word-break: break-all;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content {
		flex: 1;
		margin: 0 0 52rpx;
		// padding-bottom: 200rpx;
		display: flex;
		flex-direction: column;

		.container {
			flex: 1;
			background-color: #fff;
		}
	}

	.detail {
		padding: 52rpx 40rpx;
		flex: 1;

		// border-radius: 48rpx;
		padding-top: 52rpx;
		@include flex(column);

		.s1 {
			height: 196rpx;
			border-radius: 16rpx;
			width: 100%;
		}

		.title {
			height: 36rpx;
			font-size: 36rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #110202;
			line-height: 36rpx;
			margin-top: 40rpx;
		}

		.time,
		.address {
			height: 28rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #110202;
			line-height: 28rpx;
			margin-top: 16rpx;
		}

		.content-images {
			@include flex(column);
			margin-top: 40rpx;

			image {
				width: 100%;
			}
		}
	}

	.popup_image {
		width: 622rpx;
		height: 1062rpx;
		position: relative;

		.back {
			position: absolute;
			width: 622rpx;
			height: 500px;
			background: #FFFFFF;
			border-radius: 24rpx;
			opacity: 1;
			top: 60rpx;
		}

		.share_image {
			position: absolute;
			width: 598rpx;
			height: 798rpx;
			background: linear-gradient(180deg, rgba(30, 26, 26, 0) 0%, #241F1F 100%);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			opacity: 1;
			top: 72rpx;
			left: 12rpx;
		}

		.close {
			width: 40rpx;
			height: 40rpx;
			opacity: 1;
			position: absolute;
			right: 4rpx;
			top: 0;
			text-align: center;
			line-height: 40rpx;
			border-radius: 50%;
			font-size: 26rpx;
		}

		.text_note {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 32rpx;
			color: #1D2129;
			width: 400rpx;
			height: 200rpx;
			position: absolute;
			left: 146rpx;
			bottom: 24rpx;

			text {
				margin-left: 32rpx;
			}
		}

		.button {
			width: 290rpx;
			height: 96rpx;
			position: absolute;
			left: 160rpx;
			bottom: 72rpx;

			button {
				width: 290rpx;
				height: 96rpx;
				background: #7677EB;
				box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(63, 140, 255, 0.2637);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				opacity: 1;
				color: #fff;
				font-size: 30rpx;
				line-height: 96rpx;
			}
		}
	}

	.but {
		width: 100%;
		@include flex;
		justify-content: center;
		position: fixed;
		bottom: 20rpx;
		left: 0;

		.s1 {
			width: 290rpx;
			height: 96rpx;
			margin-right: 80rpx;
			background: #fff;
			box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
			border-radius: 28rpx;
			text-align: center;
			border: 2rpx solid #7677EB;

			text {
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #7677EB;
				line-height: 96rpx;
			}
		}

		.s2 {
			width: 290rpx;
			height: 96rpx;
			background: #7677EB;
			box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
			border-radius: 28rpx;
			text-align: center;
			border: 2rpx solid #7677EB;

			text {
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 96rpx;
			}
		}
	}

	.but-tab {
		position: fixed;
		right: 5rpx;
		top: 118rpx;
		width: 84rpx;
		@include flex(column);

		image {
			width: 84rpx;
			height: 84rpx;
			margin-top: 20rpx;
		}
	}



	/* 图片旋转动画 */
	@keyframes image-trans {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		.song-play-animation {
			animation: image-trans infinite 10s linear;
		}
	}

	/* 音频暂停时，图片暂停旋转 */
	.song-play-animation-paused {
		animation-play-state: paused;
	}

	.avatars {
		display: flex;
		flex-direction: column;
		width: 566rpx;
		margin: 0 auto 200rpx;

		.title {
			height: 42rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #110202;
			line-height: 42rpx;
		}

		.avatar {
			display: flex;
			align-items: center;
			margin-top: 40rpx;

			image {
				margin-right: -16rpx;
				width: 64rpx;
				height: 64rpx;
				background-color: #ccc;
				border-radius: 50%;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 2rpx solid #fff;
			}
		}
	}

	.temp {
		margin: 40rpx 0;
		box-sizing: border-box;

		.img {
			width: 100%;
			height: 480rpx
		}

		.temp0 {
			position: relative;
			margin: 0 -44rpx;

			text {
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				font-size: 37rpx;
				color: #000000;
				line-height: 44rpx;
				position: absolute;
				top: 30rpx;
				left: 50%;
				transform: translate(-50%, 30rpx) rotate(8deg);
			}

			.aaaa {
				display: flex;
				justify-content: flex-end;
				width: 100%;
			}

			.clock-img {
				width: 130rpx;
				height: 130rpx;
				position: absolute;
				top: -100rpx;
				transform: translateY(70rpx);
				left: -70rpx;
			}

			.dddd {
				display: flex;
				align-items: center;
			}

			.cccc {
				min-width: 42rpx;
				height: 48rpx;
				padding: 0 4rpx;
				line-height: 48rpx;
				background: #F42835;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 1000;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				margin: 0 8rpx;
			}

			.clock-item {
				margin-right: 46rpx;
				padding-right: 32rpx;
				display: flex;
				align-items: center;
				width: 582rpx;
				height: 80rpx;
				background: linear-gradient(270deg, #FFECDA 0%, rgba(255, 236, 218, 0.8) 100%);
				border-radius: 0rpx 480rpx 480rpx 0rpx;
				border: 2rpx solid #F42835;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 600;
				font-size: 28rpx;
				color: #FF404A;
				justify-content: flex-end;
			}

			.clock {
				position: absolute;
				padding: 0 20rpx;
				width: 100%;
				height: 80rpx;

				border-radius: 2938rpx 2938rpx 2938rpx 2938rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				// background: #00000094;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 50rpx;
				text-align: center;
				left: 50%;
				bottom: 34rpx;
				transform: translate(-50%, 0);
			}
		}

		.temp1 {
			position: relative;
			border: 2rpx dashed #bfbfbf;

			text {
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				font-size: 37rpx;
				color: #000000;
				line-height: 44rpx;
				position: absolute;
				top: 30rpx;
				left: 50%;
				transform: translate(-50%, 30rpx) rotate(8deg);
			}

			.clock {
				position: absolute;
				width: 406rpx;
				padding: 0 10rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 2248rpx 2248rpx 2248rpx 2248rpx;
				border: 2rpx dashed #D09900;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				font-size: 23rpx;
				color: #5E5E5E;
				text-align: center;
				left: 50%;
				bottom: 58rpx;
				transform: translate(-50%, 0);
			}
		}

		.temp2 {
			position: relative;

			text {
				width: 260rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 700;
				font-size: 40rpx;
				color: #000000;
				line-height: 44rpx;
				position: absolute;
				top: 30rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}

			.clock {
				position: absolute;
				padding: 0 20rpx;
				height: 128rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				background: #262626;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 50rpx;
				text-align: center;
				left: 50%;
				bottom: 34rpx;
				transform: translate(-50%, 0);
			}
		}
	}

	.temp3 {
		position: relative;

		text {
			width: 474rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 700;
			font-size: 48rpx;
			color: #000000;
			text-align: center;
			position: absolute;
			top: 132rpx;
			left: 50%;
			transform: translate(-50%, -32%) rotate(-8deg);
		}

		.clock {
			position: absolute;
			padding: 0 10rpx;
			width: 504rpx;
			height: 78rpx;
			background: #2E2E2E;
			border-radius: 2938rpx 2938rpx 2938rpx 2938rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background: #262626;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 50rpx;
			text-align: center;
			left: 50%;
			bottom: 34rpx;
			transform: translate(-50%, 0);
		}
	}

	.temp4 {
		position: relative;

		text {
			width: 540rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 700;
			font-size: 48rpx;
			color: #000000;
			text-align: center;
			position: absolute;
			top: 100rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}


		.clock {
			position: absolute;
			width: 504rpx;
			height: 78rpx;
			padding: 0 10rpx;
			background: #FFD175;
			box-shadow: 0rpx 6rpx 0rpx 0rpx #4C4C4C;
			border-radius: 2938rpx 2938rpx 2938rpx 2938rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-weight: 500;
			font-size: 28rpx;
			color: #2B2B2B;
			line-height: 50rpx;
			text-align: center;
			left: 50%;
			bottom: 74rpx;
			transform: translate(-50%, 0);
		}
	}

	.list {
		@include flex(column);
		padding-bottom: 36rpx;

		.item {
			background-color: #FFF;
			border-radius: 48rpx;
			margin-bottom: 40rpx;

			.txt {
				white-space: pre-wrap;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				font-size: 28rpx;
				color: #7D8592;
				line-height: 45rpx;
				// text-indent: 2rem;
			}
		}
	}

	.audio-btn {
		position: absolute;
		right: -60rpx;
		top: -14rpx;
		width: 100rpx;
		height: 100rpx;
		padding: 10px;
		z-index: 555;
		transform: scale(0.6);
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		@include flex(column);

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>